<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Four</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
<a href="/" >返回首页</a>
<div id="app">
    <form>
        收件箱地址:<input type="text" v-model="email" placeholder="收件箱地址">
        邮件标题:<input type="text" v-model="title" placeholder="邮件标题">
        邮件内容:<input type="text" v-model="content" placeholder="邮件内容">
        <button @click.prevent="sendEmail">发送邮件</button>
        <input type="reset" value="重置选项">
    </form>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            email: '',
            title:'',
            content:''
        },
        methods: {
            sendEmail(){
                let data = {
                    email: this.email,
                    title:this.title,
                    content:this.content
                }
                let match = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.(com)$/
                if(!match.test(data.email)){
                    alert("邮箱格式不正确");
                    return;
                }
                // $.post("/email/sendEmail", data, data => {
                //     alert(data);
                // })
            }
        },
        created() {

        }
    })
</script>
</html>